<template>
  <el-card class="p-4 rounded-2xl bg-white">
    <template #header>
      <div class="text-xl font-bold text-gray-800">流程重构步骤时间线</div>
    </template>
    <div class="timeline-container">
      <div
          v-for="(step, index) in steps"
          :key="index"
          class="timeline-step"
      >
        <!-- 圆圈 + 箭头 -->
        <div class="step-header">
          <div class="step-circle">{{ index + 1 }}</div>
          <!-- 箭头连接线 -->
          <svg
              v-if="index !== steps.length - 1"
              class="step-arrow"
              viewBox="0 0 60 10"
              preserveAspectRatio="none"
          >
            <line x1="0" y1="5" x2="55" y2="5" stroke="#dcdfe6" stroke-width="2"/>
            <polygon points="55,1 60,5 55,9" fill="#dcdfe6"/>
          </svg>
        </div>
        <!-- 内容 -->
        <div class="step-content">
          <div class="step-title">
            <el-tag

                effect="plain"
                round
            >
              {{step.endTime}}
            </el-tag>
          </div>
          <div class="step-title">{{ step.title }}</div>
          <ul class="step-list">
            <li v-for="(item, i) in step.details" :key="i">{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
const steps = [
  {
    endTime:'2025-06-30',
    title: '级联逻辑代码编写',
    details: [
      '表格外字段 → 表格外字段：控制显示、禁用、隐藏、必填、选项加载等',
      '表格外字段 → 表格内字段：控制内表字段的显示、必填、行增删、合计等',
      '表格内字段 → 表格内字段：如数量 × 单价 = 金额，或 API 回填字段值',
      '表格内字段 → 表格外字段：例如影响表外的总金额',
      '表内表外组合级联：如“出差 + 日期” → 表内时长 & 表外总时长',
      '多个表格间联动：如项目名称影响下表的税率与金额等',
      '通过按钮弹窗填写 → 回填表格字段：如哺乳假、资产归还等'
    ]
  },
  {
    endTime:'2025-06-15',
    title: '组件增强属性',
    details: [
      '下拉选择（el-select）：支持 clearable、filterable、multiple、remote 加载',
      '单选/复选组（radio/checkbox group）：支持远程选项配置',
      '时间/日期组件：支持 picker-options 配置、限制范围、快捷选项等',
      '上传组件：支持 action、data、multiple、limit 等扩展属性',
      '提示信息样式优化：组件旁或下方增加说明、颜色、字体等样式调整'
    ]
  },
  {
    endTime:'2025-07-01',
    title: '配置页面开发',
    details: [
      '级联逻辑配置界面：前述所有“内外字段级联”的 UI 可视化配置',
      '增强属性配置界面：下拉、时间选择等属性通过页面配置实现统一管理'
    ]
  },
  {
    endTime:'2025-07-15',
    title: '组件二次封装',
    details: [
      '字段权限封装：控制编辑、禁用、隐藏，支持初始化时按权限决定是否展示或变为只读',
      '注入业务专用组件属性：如 field-compile、selective-input、fc-detail-content 等',
      '封装选择类组件：如固定人员、预算类型、po选择、评分器、项目编码等自定义组件',
      '封装表单扩展类组件：如出差记录、po审批、资产详情、客户名称、探亲选择器等',
      '封装布局类组件：如 layout 容器行内布局、rowFormItem 封装'
    ]
  },
  {
    endTime:'2025-08-01',
    title: '事件与逻辑配置',
    details: [
      '支持业务逻辑事件配置：如加班时长计算、出差联动天数、补卡时段关联打卡时间',
      '丰富的事件类型枚举：如 GET_F_CARD_TIME、DIFF_DATE_CHANGE、TOTAL_AMOUNT_OF_TEMPORARY_SALARY_INCREASE',
      '流程事件钩子统一注册：如 EVENT_TYPE_CHANGE、OVERTIME_MODEL_CHANGE_MULTIPLES、COPY_EXPENSE_DETAILS',
      '表格内外联动计算公式统一：如 SUB_TOTAL_GET、REAL_INCOME、CALCULATE_THE_TOTAL_AMOUNT',
      '表单行为控制：禁选未来日期、自动填充银行卡信息、资产自动生成编号等逻辑'
    ]
  },
  {
    endTime:'2025-08-15',
    title: '风险与历史兼容',
    details: [
      '历史流程表单兼容：新旧逻辑共存，通过流程配置项控制是否启用新版逻辑',
      '新增字段支持配置标识，如 useNewLogic: true，以走新版级联和组件逻辑',
      '保留旧逻辑路径，确保历史流程继续正常运行，避免升级影响老数据使用'
    ]
  }
]
/*
const steps = [
  {
    title: '级联逻辑代码编写',
    details: ['表格外 → 外字段', '外 → 内字段', '内 → 内字段', '表间联动', '弹窗反填'],
  },
  {
    title: '组件增强属性',
    details: ['下拉/单选优化', '时间/上传配置', '提示信息优化'],
  },
  {
    title: '配置页面开发',
    details: ['级联配置页面', '增强属性页面'],
  },
  {
    title: '组件二次封装',
    details: ['禁用/隐藏逻辑封装', '组件统一属性注入'],
  },
  {
    title: '事件与逻辑配置',
    details: ['支持业务事件（打卡、预算等）'],
  },
  {
    title: '风险与历史兼容',
    details: ['配置项区分新旧逻辑'],
  },
]
*/
</script>
<style scoped>
.timeline-container {
  display: flex;
  overflow-x: auto;
  gap: 0rem;
  padding: 0;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  flex-shrink: 0;
  position: relative;
  max-width: 220px;
  word-break: break-all;
}

.step-header {
  right: -45%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  position: relative;
}

.step-circle {
  background-color: #409eff;
  color: white;
  font-weight: 600;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
}

/* SVG 箭头样式 */
.step-arrow {
  width: 80%;
  height: 12px;
  margin-left: 6px;
  flex-shrink: 0;
}

.step-content {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 13px;
  color: #444;
}

.step-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 18px;
  color: #303133;
}

.step-list {
  list-style: disc;
  padding-left: 1rem;
  text-align: left;
  color: #606266;
  line-height: 1.4;
  font-size: 12px;
}
</style>
